<template>
  <div>
    <div id="tools-bar" class="slide-in-top">
      <div class="left-tools-bar">
        <ul class="text-operation operate">
          <li class="art-text"><span>特效</span></li>
          <li class="color tips">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="selectedObj.fill"
              @change="selectFontColor"
            ></el-color-picker>
          </li>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="字体"
            placement="bottom"
          >
            <el-popover placement="bottom" width="250" trigger="click">
              <el-row class="fontClass">
                <el-col :span="24">
                  <el-input
                    placeholder="搜索字体"
                    prefix-icon="el-icon-search"
                    v-model="fontSearch"
                  ></el-input>
                  <el-col :span="24" style="margin:10px 0;text-align:center">
                    <el-radio-group
                      @change="fontChange();"
                      size="mini"
                      v-model="chnAndEng"
                    >
                      <el-radio-button label="中文"></el-radio-button>
                      <el-radio-button label="英文"></el-radio-button>
                    </el-radio-group>
                  </el-col>
                </el-col>

                <el-col v-if="chnOrEng" :span="24" class="allFont">
                  <div
                    v-for="(li, index) in fontFamilyList.body.officialFonts"
                    :key="index"
                  >
                    <div v-if="li.kindId !== 23">
                      <div
                        class="font-fontfamily-dividing-line"
                        style="text-align:center"
                      >
                        {{ li.kindName }}
                      </div>
                      <div
                        class="font-fontfamily-selector-inner-li"
                        v-for="(item, index) in li.fonts"
                        :key="index"
                      >
                        <span
                          :style="{ fontFamily: item.fontFamily }"
                          @click="$store.dispatch('font', item.fontFamily);"
                          >{{ item.fontName }}</span
                        >
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="!chnOrEng" :span="24" class="allFont">
                  <div
                    v-for="(li, index) in fontFamilyList.body.officialFonts"
                    :key="index"
                  >
                    <div v-if="li.kindId == 23">
                      <div
                        class="font-fontfamily-dividing-line"
                        style="text-align:center"
                      >
                        {{ li.kindName }}
                      </div>
                      <div
                        class="font-fontfamily-selector-inner-li"
                        v-for="(item, index) in li.fonts"
                        :key="index"
                      >
                        <span
                          :style="{ fontFamily: item.fontFamily }"
                          @click="$store.dispatch('font', item.fontFamily);"
                          >{{ item.fontName }}</span
                        >
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <li slot="reference" class="font-family-choose tips">
                <div class="font-family-wrap">宋体</div>
              </li>
            </el-popover>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="字体大小"
            placement="bottom"
          >
            <el-dropdown size="small" @command="selectFontSize">
              <li class="font-size-choose tips">
                <input type="text" :value="selectedObj.fontSize" />
                <div class="font-pop-icon"></div>
              </li>
              <el-dropdown-menu class="dropdownFont" slot="dropdown">
                <el-dropdown-item
                  v-for="(font, index) in fontSizeList"
                  :command="font"
                  :key="index"
                  >{{ font }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="斜体"
            placement="bottom"
          >
            <li
              :class="
                'font-i-choose tips ' +
                  (selectedObj.fontStyle == 'italic' ? 'active' : '')
              "
              @click="selectFontItalic"
            >
              <span class="icon italic"></span>
            </li>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            v-if="false"
            effect="dark"
            content="竖版"
            placement="bottom"
          >
            <li class="font-i-choose tips">
              <span class="icon writingMode"></span>
            </li>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="下划线"
            placement="bottom"
          >
            <li
              :class="
                'font-u-choose tips ' + (selectedObj.underline ? 'active' : '')
              "
              @click="selectFontUnderline"
            >
              <span class="icon underline"></span>
            </li>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="加粗"
            placement="bottom"
          >
            <el-popover placement="bottom" width="300" trigger="click">
              <el-row class="paddingPopover">
                <el-col :span="5" style="line-height:38px">
                  <span>加粗</span>
                </el-col>
                <el-col :span="19">
                  <el-slider
                    v-model="selectedObj.fontWeight"
                    show-input
                    :show-input-controls="false"
                    input-size="mini"
                    :min="100"
                    :max="900"
                    :step="100"
                    @change="selectFontWeight"
                  >
                  </el-slider>
                </el-col>
              </el-row>
              <li
                slot="reference"
                :class="
                  'font-b-choose tips ' +
                    (selectedObj.fontWeight > 100 ? 'active' : '')
                "
              >
                <span class="icon weight"></span>
              </li>
            </el-popover>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            :content="getTextAlignText()"
            placement="bottom"
          >
            <el-popover
              class="font-a-choose"
              placement="bottom"
              width="205"
              trigger="click"
            >
              <ul class="align-check">
                <li
                  v-for="(li, index) in fontAList"
                  :key="index"
                  :class="
                    getTextAlign() == li.class
                      ? `${li.class} active`
                      : `${li.class}`
                  "
                  @click="selectTextAlign(li.class);"
                >
                  <span></span>
                </li>
              </ul>
              <li slot="reference" class="font-a-choose tips">
                <span
                  :class="'icon align check-' + selectedObj.textAlign"
                ></span>
              </li>
            </el-popover>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            effect="dark"
            content="间距"
            placement="bottom"
          >
            <el-popover placement="bottom" width="300" trigger="click">
              <div class="paddingPopover">
                <el-row>
                  <el-col :span="5" style="line-height:38px">
                    <span>字间距</span>
                  </el-col>
                  <el-col :span="19">
                    <el-slider
                      :max="1600"
                      :min="3"
                      :step="1"
                      show-input
                      v-model="selectedObj.charSpacing"
                      :show-input-controls="false"
                      input-size="mini"
                      @change="selectCharSpacing"
                    >
                    </el-slider>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" style="line-height:38px">
                    <span>行间距</span>
                  </el-col>
                  <el-col :span="19">
                    <el-slider
                      v-model="selectedObj.lineHeight"
                      :max="20"
                      :min="1"
                      :step="0.1"
                      show-input
                      :show-input-controls="false"
                      input-size="mini"
                      @change="selectLineHeight"
                    >
                    </el-slider>
                  </el-col>
                </el-row>
              </div>
              <li slot="reference" class="font-s-choose tips">
                <span class="icon space"></span>
              </li>
            </el-popover>
          </el-tooltip>
        </ul>
      </div>

      <div class="right-tools-bar">
        <rightTool :selectedObj="selectedObj"></rightTool>
      </div>
    </div>
  </div>
</template>

<script>
import rightTool from "./rightTool";
import { mapGetters, mapActions } from "vuex";
import FontFamilys from "@/api/allData/FontInfo/getFontInfo";
export default {
  components: { rightTool },
  props: {
    selectedObj: {}
  },
  data() {
    return {
      fontFamilyList: FontFamilys,
      color1: "#000",
      active: 1,
      chnOrEng: true,
      fontSearch: "",
      chnAndEng: "中文",
      jiacu: 0,
      zijianju: 1600,
      hangjianju: 1600,
      fontAList: [
        { class: "check-left" }, //左对齐
        { class: "check-center" }, //居中对齐
        { class: "check-right" }, //右对齐
        { class: "check-justify" } //两端对齐
      ],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      fontSizeList: [
        6,
        8,
        9,
        10,
        12,
        14,
        16,
        18,
        20,
        24,
        28,
        32,
        36,
        40,
        44,
        48,
        54,
        60,
        64,
        72,
        80,
        88,
        96,
        104,
        120,
        144,
        200,
        250,
        300,
        350,
        400,
        500,
        600,
        700,
        800,
        900,
        1000
      ]
    };
  },
  computed: {
    ...mapGetters(["canvas", "undoList", "redoList"])
  },
  watch: {
    // "selectedObj.fill"() {
    //   this.$store.state.app.selectedObj.fill = selectedObj.fill;
    // }
  },
  created() {
    console.log(this.fontSizeList, " console.log(this.fontSizeList);");
  },
  mounted() {
    console.log(this.selectedObj);
  },
  methods: {
    ...mapActions(["copy", "paste", "zhiding"]),
    getTextAlignText() {
      if (this.selectedObj.textAlign == "justify") return "两端对齐";
      if (this.selectedObj.textAlign == "right") return "右对齐";
      if (this.selectedObj.textAlign == "center") return "居中对齐";
      return "左对齐";
    },
    getTextAlign() {
      return "check-" + (this.selectedObj.textAlign || "left");
    },
    selectFontItalic() {
      this.selectedObj.fontStyle =
        this.selectedObj.fontStyle == "italic" ? "" : "italic";

      console.log(this.selectedObj);

      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectFontWeight(value) {
      console.log(value);
      this.selectedObj.fontWeight = value;

      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },

    selectLineHeight(value) {
      this.selectedObj.lineHeight = value;
      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectCharSpacing(value) {
      this.selectedObj.charSpacing = value;
      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectFontUnderline() {
      this.selectedObj.set("underline", !this.selectedObj.underline);
      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectTextAlign(cls) {
      this.selectedObj.textAlign = cls.split("-")[1];
      //强制刷新
      this.$forceUpdate();
      this.canvas.requestRenderAll();
    },
    selectFontColor(color) {
      this.canvas.requestRenderAll();
    },
    selectFontSize(font) {
      let oldWidth = this.selectedObj.width;
      let width =
        this.canvas.getSelectionContext().measureText(this.selectedObj.text)
          .width / this.canvas.getZoom();
      //设置到最小
      //this.selectedObj.width = 0;
      //this.selectedObj.setCoords();

      //   console.log(
      //     "DDDDDDDDDDDD",
      //     this.canvas.getSelectionContext().measureText,
      //     width
      //   );
      console.log(oldWidth, width);

      this.selectedObj.fontSize = font;

      //if (oldWidth == width) {
      this.selectedObj.width = 0;
      this.selectedObj.setCoords();
      //}

      this.canvas.requestRenderAll();
    },
    fontChange() {
      console.log(this.chnAndEng, 555);
      if (this.chnAndEng == "中文") this.chnOrEng = true;
      else this.chnOrEng = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../styles/centerPanel/wordcss.less";

.dropdownFont {
  max-height: 360px !important;
  overflow: auto !important;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}
.allFont {
  max-height: 300px !important;
  overflow: auto !important;
}
.paddingPopover {
  padding: 0 5px;
}
.fontClass /deep/.el-input__inner {
  width: 100% !important;
  padding: 0 30px !important;
}
.fontClass /deep/.el-radio-button--mini .el-radio-button__inner {
  padding: 5px 35px !important;
}
</style>
